{% extends 'web_base/base_head_foot.html' %}
{% load staticfiles %}

{% block base_link_script %}
    <link rel="stylesheet" href="{% static 'css/game_main.css' %}"/>
{% endblock %}

{% block base_body %}
<div class="banner">
    <div class="image ui fluid">
        <a href="#"><img src="/upload/images/banner2.jpg"/></a>
    </div>
</div>


<div class="main ui container">
    {% if game_class|length > 1 %}
    <div class="top_btn">
        {% for gc in game_class %}
        <a href="{% url 'real_main' %}?class_id={{ gc.id}}">
        <button class="ui button">{{ gc.class_name }}</button>
        </a>
        {% endfor %}
    </div>
    <div class="section">
        <div class="section_title">
            <h3>最新更新</h3>
            <a href="#">更多</a>
        </div>
        <div class="item_ls ui cards">
            {% for nw in new_ups %}
            <div class="ui card">
                <div class="image">
                    <a href="game_detail.html"><img src="/upload/{{ nw.gamedetail.icon }}"></a>
                </div>
                <div class="item_con">
                    <a class="header">{{ nw.name }}</a>
                    <div class="meta fluid">
                        <span class="date"><a href="#">{{ nw.gamedetail.belong_class.all.first }}</a><span class="i_star"><span>{{ nw.gamedetail.level }}</span><i class="icon ui star"></i></span></span>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    <div class="section">
        <div class="section_title">
            <h3>近期最热</h3>
            <a href="#">更多</a>
        </div>
        <div class="item_ls ui cards">
            {% for hot in hots%}
            <div class="ui card">
                <div class="image">
                    <a href="game_detail.html"><img src="/upload/{{ hot.gamedetail.icon }}"></a>
                </div>
                <div class="item_con">
                    <a class="header">{{ hot.name }}</a>
                    <div class="meta fluid">
                        <span class="date"><a href="#">{{ hot.gamedetail.belong_class.all.first }}</a><span class="i_star"><span>{{ hot.gamedetail.level }}</span><i class="icon ui star"></i></span></span>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    <div class="section">
        {% for gc in game_class %}
        <div class="section_title">
            <h3>{{ gc.class_name }}</h3>
            <a href="?class_id={{ gc.id }}">更多</a>
        </div>
        <div class="item_ls ui cards">
            {% if game_class|length > 1 %}
            {% for hot in gc.rel_game.all|slice:":10" %}
            <div class="ui card">
                <div class="image">
                    <a href="game_detail.html"><img src="/upload/{{ hot.icon }}"></a>
                </div>
                <div class="item_con">
                    <a class="header">{{ hot.belong_game.name }}</a>
                    <div class="meta fluid">
                        <span class="date"><a href="#">{{ hot.belong_class.all.first }}</a><span class="i_star"><span>{{ hot.level }}</span><i class="icon ui star"></i></span></span>
                    </div>
                </div>
            </div>
            {% endfor %}

            {% else %}
            {% for hot in gc.rel_game.all %}
            <div class="ui card">
                <div class="image">
                    <a href="game_detail.html"><img src="/upload/{{ hot.icon }}"></a>
                </div>
                <div class="item_con">
                    <a class="header">{{ hot.belong_game.name }}</a>
                    <div class="meta fluid">
                        <span class="date"><a href="#">{{ hot.belong_class.all.first }}</a><span class="i_star"><span>{{ hot.level }}</span><i class="icon ui star"></i></span></span>
                    </div>
                </div>
            </div>
            {% endfor %}
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>

{% endblock %}

{% block base_script %}
    $(document).ready(function() {

        $('.tabular.menu').tab();
    });
{% endblock %}
